<template>
    <div class="todo-list">
      <h2>自律一下</h2>
      <input v-model="newTodoTitle" @keyup.enter="addTodo" placeholder="添加新的待办事项" />
      <button @click="addTodo">添加</button><br>
      <ul>
        <li v-for="(todo, index) in todos" :key="index">
          <TodoItem
            :title="todo.title"
            :completed="todo.completed"
            @update:completed="updateTodoCompleted(index, $event)"
            @remove-todo="removeTodo(index)"
          />
        </li>
      </ul>
    </div>
  </template>
  
  <script>
  import TodoItem from './TodoItem.vue';
  
  export default {
    name: 'TodoList',
    components: {
      TodoItem
    },
    data() {
      return {
        todos: [],
        newTodoTitle: ''
      };
    },
    methods: {
      addTodo() {
        if (this.newTodoTitle.trim()) {
          this.todos.push({ title: this.newTodoTitle, completed: false });
          this.newTodoTitle = '';
        }
      },
      removeTodo(index) {
        this.todos.splice(index, 1);
      },
      updateTodoCompleted(index, completed) {
        this.todos[index].completed = completed;
      }
    }
  };
  </script>
  
  <style scoped>
  .todo-list {
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    text-align: center;
  }
  
  input, button, ul {
    display: inline-block;
    vertical-align: middle;
  }
  
  button {
    padding: 5px 10px;
  }
  
  ul {
    list-style-type: none;
    padding: 0;
    text-align: left; 
    margin-top: 20px;
  }
  
  li {
    margin: 10px 0;
  }
  </style>